<template>
	<view class="wrap">

		<view class="top">
			<view class="search">
				<uni-section type="line" title="padding:0">
					<uni-search-bar clearButton cancelButton placeholder="请输入员工姓名" bgColor="#ffffff"
						@confirm="searchEmployeeInfo" />
				</uni-section>
			</view>
			<view class="show">
				<view class="global" @click="toInfoma">
					<view class="global_item" style="background-color: #2196F3">添加信息</view>
				</view>
			</view>
		</view>
		<view class="InfoList">
			<view class="InfoItem" v-for="item in employeeList" :key="item.id" @click="toInfomation(item.id)"
				@longpress="longTapDelete(item.id)">
				<view class="info">
					<view class="photo">
						<image :src="item.photo"></image>
					</view>
					<view class="desc">
						<view class="name">姓名：{{item.name}}</view>
						<view class="gender">性别：{{item.gender === 'M' ? '男' : '女'}}</view>
						<view class="birthDate">出生日期：{{formatDate(item.birth_date)}}</view>
						<view class="joinDate">加入日期：{{formatDate(item.join_date)}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding-top: 100rpx;">
			<!-- <u-empty mode="list" text="暂无数据"></u-empty> -->
		</view>
	</view>
</template>

<script>
	import {
		getEmployeeList,
		deleteEmployeeInfo,
		getEmployeeByName
	} from '@/api/user.js'
	export default {
		data() {
			return {
				keyword: '',
				current: 0,
				employeeList: []
			}
		},
		onLoad() {
			this.getUserList()
		},
		onShow() {
			this.getUserList()
		},
		methods: {
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = ('0' + (date.getMonth() + 1)).slice(-2);
				const day = ('0' + date.getDate()).slice(-2);
				// 返回格式化后的日期字符串
				return `${year}-${month}-${day}`;
			},
			async getUserList() {
				const res = await getEmployeeList()
				if (res.code === 200) {
					this.employeeList = res.data
				}
				console.log(res);
			},
			longTapDelete(id) {
				uni.showModal({
					title: '是否删除？',
					confirmColor: '#0099ff',
					cancelColor: '#000000',
					success: (res) => {
						if (res.confirm) {
							this.deleteUserInfo(id)
						}
					}
				})
			},
			async deleteUserInfo(id) {
				// 调用删除员工信息的接口
				const res = await deleteEmployeeInfo(id);

				// 检查删除操作是否成功
				if (res.code === 200) {
					// 删除成功，从列表中移除该员工信息
					this.employeeList = this.employeeList.filter(employee => employee.id !== id);
					// 可以在这里添加删除成功的提示
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.getUserList()
				} else {
					// 删除失败，显示错误信息
					uni.showToast({
						title: '删除失败：' + (res.message || '未知错误'),
						icon: 'none'
					});
				}
			},
			toInfoma() {
				uni.navigateTo({
					url: "/pages/information/information"
				})
			},
			toInfomation(id) {
				uni.navigateTo({
					// url: `/pages/information/information?id=${JSON.stringify(id)}&flag=true`
					url: "/pages/information/information?id=" + JSON.stringify(id) + "&flag=true"
				})

			},
			async searchEmployeeInfo(name) {
				if (name.value) {
					const res = await getEmployeeByName(name.value)
					this.employeeList = res.data
				} else {
					this.getUserList()
				}

				console.log(name.value);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.wrap {
		margin: 20rpx;


		.top {
			display: flex;
			align-items: center;

			.search {
				flex: 2;
				margin: 0 20rpx 0 0;

			}

			.show {
				flex: 1;

				.global {

					&_item {
						// background-color: #F3C301;
						padding: 20rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #ffffff;
						text-align: center;
						border-radius: 20rpx;
						box-shadow: 10rpx 10rpx 10px #ccc;
					}
				}
			}
		}

		.InfoList {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;

			.InfoItem {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
				box-shadow: 10rpx 10rpx 10px #ccc;
			}

			.info {
				display: flex;
				width: 100%;
			}

			.photo {
				flex: 0 0 200rpx; // 一寸照的宽度大约为200rpx
				margin-right: 20rpx;
			}

			.photo image {
				width: 200rpx; // 设置图片宽度
				height: 280rpx; // 设置图片高度，一寸照的比例大约为1:1.4
				object-fit: cover; // 确保图片内容适应尺寸
				border-radius: 4rpx; // 圆角边框
			}

			.desc {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex-grow: 1; // 允许.desc占据剩余空间

				text {
					font-weight: bold;
					color: #000;
				}

			}

			.name,
			.gender,
			.birthDate,
			.joinDate {
				margin-bottom: 5rpx; // 信息之间的间距
			}

			// 响应式设计，当屏幕较小时，堆叠照片和信息
			@media (max-width: 768rpx) {
				.InfoItem {
					flex-direction: column;
					align-items: center;
				}

				.photo {
					margin: 0 0 20rpx 0; // 屏幕较小时，照片底部留出空间
				}

				.desc {
					text-align: center; // 确保所有文本居中
				}
			}
		}
	}
</style>